<template>
  <span class="vb-user-input">
    <el-input v-model="valueText" :placeholder="placeholder" suffix-icon="el-icon-search" @focus="handleClick" clearable @clear='handleClear' />
    <VbUser v-model="data" :single="true" :type="type" :displayUserName='displayUserName' :visible="visible" @close="handleClose" />
  </span>
</template>
<script>
import VbUser from './index.vue'
export default {
  name: 'VbUserInput',
  components: { VbUser },
  props: {
    placeholder: {
      type: String,
      default: '请选择'
    },
    value: {
      type: [Array, Object],
      default: () => {
        return []
      }
    },
     type: {
      type: String,
      default: 'user' // dept 为只显示部门
    },
     displayUserName: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      visible: false,
      data: {},
      

    }
  },
  computed: {
    valueText() {
      return this.displayUserName?(this.value?this.value.userName:''):(this.value?this.value.name:'')
    }
  },
  methods: {
    handleClose(v) {
      console.log('data:', this.data, v)
      if (v) {
    
        this.$emit('input',v)
        this.$emit('change',v)
      
      }
      this.visible = false
    },
    handleClick() {
      this.visible = true
    },
    handleClear(){
      this.data={}
      this.$emit('input',{})
    
    }
  }
}
</script>
<style lang='scss'>
.vb-user-input{

}
</style>
